<div class="layui-body">
  <div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <blockquote class="layui-elem-quote layui-text">
      带*的内容为必填项,其他为选填项。
    </blockquote>
  </div>
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名*</label>
      <div class="layui-input-inline">
        <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码*</label>
      <div class="layui-input-inline">
        <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">手机号</label>
      <div class="layui-input-inline layui-input-wrap">
        <input type="tel" name="phone" lay-verify="phone" placeholder="请输入手机号" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">电子邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" placeholder="请输入电子邮箱" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">设置头像</label>
      <div class="layui-input-inline layui-input-wrap">
        <input type="text" id="imgurl" name="imgurl" lay-verify="imgurl" placeholder="图片地址或手动上传" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-input-inline layui-input-wrap">
        <button type="button" class="layui-btn" id="upload-btn" style="margin-left:30px;">上传图片</button>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">权限组</label>
      <div class="layui-input-inline">
        <select id="group" name="group" class="layui-input">
          <option value="">请选择权限组</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">系统等级</label>
      <div class="layui-input-inline">
        <select id="adming" name="adming" class="layui-input">
          <option value="">请选择系统级别</option>
          <option value="1">访客</option>
          <option value="2">普通用户</option>
          <option value="3">群组管理员</option>
          <option value="4">全局管理员</option>
          <option value="5">系统管理员</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">是否启用</label>
      <div class="layui-input-block">
        <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="是|否">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
  <script>
    layui.use(['form', 'laydate', 'util', 'layer','upload'], function() {
        var upload = layui.upload;
        var layer = layui.layer;
        // 渲染
        upload.render({
            elem: '#upload-btn', // 绑定多个元素
            url: '<?=getUrl('api','upload','index')?>', // 此处配置你自己的上传接口即可
            accept: 'file', // 普通文件
            dataType: 'json',
            data: {
                mode: 'layui',
            },
            size:48828,
            done: function(res, index, upload) {
                if (res.cod = 1) {
                    layer.msg('上传成功');
                    console.log(res);

                    document.getElementById("imgurl").value = res.data.src;
                } else {
                    layer.msg('上传失败');
                }
            }
        });
      var form = layui.form;
      var layer = layui.layer;
      var laydate = layui.laydate;
      var util = layui.util;
      var dropdown = layui.dropdown;
      $.ajax({
        url: '/admin/api/getgroup.php',
        dataType: 'json',
        type: 'get',
        success: function(data) {
          // console.log(data);
          $.each(data.data, function(index, value) {
            // $('#group').append('<option value="'+value.id+'">'+value.name+'</option>');
            $('#group').append(new Option(value.groupname, value.id));
          })
          form.render('select');
        }
      });
      // 自定义验证规则
      form.verify({
        password: function(value, elem) {
          if (!/^[\S]{6,16}$/.test(value)) {
            return '密码必须为 6 到 16 位的非空字符';
          }
        },
        imgurl: function(value, elem) {
                    if(value.length>0){
                      if (!/(\jpg+$)|(\png+$)/.test(value)) {
                        return '图片格式必须为jpg,png';
                    }
                    }
                }
      });
      //图片上传
      form.on('submit(upload-btn)', function(data) {
        // 上传操作的代码
        console.log(data.field); // 获取上传的文件信息
        layer.msg('上传成功');
      });
      // 提交事件
      form.on('submit(demo1)', function(data) {
        var field = data.field;
        $.ajax({
          url: '/admin/api/adduser.php',
          data: {
            'username': field.username,
            'password': field.password,
            'phone': field.phone,
            'email': field.email,
            'imgurl': field.imgurl,
            'group': field.group,
            'adming': field.adming,
            'open': field.open
          },
          dataType: 'text',
          type: 'post',
          success: function(data) {
            if (data == "添加成功!") {
              layer.msg(data);
              setTimeout(function() {
                location.href = '/admin/useradd.php';
              }, 1000);
            } else if (data == "用户名重复!") {
              layer.msg(data);
            } else {
              layer.msg("未知错误!");
            }
          },
          error: function(data) {
            layer.msg('系统错误');
            setTimeout(function() {
                location.href = '/admin/useradd.php';
              }, 1000);
          }
        });
        return false; // 阻止默认 form 跳转
      });
    })
  </script>
</div>